<template>
<el-dialog :title="coutimesid==-1?'新增抢购':'编辑抢购'" :visible.sync="open" :before-close="close" append-to-body>
    <goodslist @getgoodsid="getgooditem"/>
    <el-form :model="f" :rules="rules" ref="CouponForm" class="dialogh">
        <el-form-item class="is-required" label="抢购标题" :label-width="formLabelWidth" prop="rushTitle">
            <el-input v-model="f.rushTitle" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="抢购副标题" :label-width="formLabelWidth">
            <el-input v-model="f.rushSubTitle" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="抢购图片" :label-width="formLabelWidth">
            <el-upload drag
                action="http://up-z0.qiniu.com"
                :data="uploadData"
                :file-list="fileDetailUploadList"
                :on-success="handleDetailUploadSuccess"
                :on-remove="handleDetailRemove"
                :on-error="handleUploadError"
                :before-upload="handleBeforUpload"
                list-type="picture-card">
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
        <el-form-item label="抢购商品" :label-width="formLabelWidth">
            <el-input class="inputw" v-model="goodsId" auto-complete="off" disabled></el-input>
            <el-button @click="getgood()">选择关联商品</el-button>
        </el-form-item>
        <el-form-item label="限购数量" class="is-required" :label-width="formLabelWidth" prop="limitNum">
            <el-input class="inputw" v-model="f.limitNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="总数量" class="is-required" :label-width="formLabelWidth" prop="totalNum">
            <el-input class="inputw" v-model="f.totalNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="剩余数量" class="is-required" :label-width="formLabelWidth" prop="remainNum">
            <el-input class="inputw" v-model="f.remainNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品原价" :label-width="formLabelWidth">
            <el-input class="inputw" v-model="f.oldPrice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="抢购价" class="is-required" :label-width="formLabelWidth" prop="rushPrice">
            <el-input class="inputw" v-model="f.rushPrice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" :label-width="formLabelWidth">
            <el-date-picker
                    v-model="useTimeValue"
                    type="datetimerange"
                    placeholder="选择时间范围">
            </el-date-picker>
        </el-form-item>
        
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
    </div>
</el-dialog>
</template>
<script>
import goodslist from 'components/goodslist'
import moment from 'moment'
export default {
    data(){
        return {
            formLabelWidth:'120px',
            open:false,
            f:{},
            useTimeValue:[],
            uploadData: {
                key: '',
                token: ''
            },
            fileDetailUploadList:[],
            // rules:{
            //     rushTitle: [
            //         { required: true, message: '请输入抢购标题', trigger: 'blur' }
            //     ],
            //     limitNum: [
            //         { required: true, message: '请输入限购数量'},
            //         { type: 'number',  message: '数量必须是数字', trigger: 'blur' }
            //     ],
            //     totalNum: [
            //         { required: true, message: '请输入总数量'},
            //         { type: 'number',  message: '数量必须是数字', trigger: 'blur' }
            //     ],
            //     remainNum: [
            //         { required: true, message: '请输入剩余数量'},
            //         { type: 'number',  message: '金额必须是数字', trigger: 'blur' }
            //     ],
            //     rushPrice: [
            //         { required: true, message: '请输入抢购价'},
            //         { type: 'number',  message: '金额必须是数字', trigger: 'blur' }
            //     ],
            // },
            rushId:-1,
            goodsId:0
        }
    },
    components:{
        goodslist
    },
    computed:{
        getstate(){
            return this.$store.state.coutimeclass;
        },
        getchange(){
            return this.$store.state.coutime;
        }
    },
    watch:{
        getstate(v){//打开弹窗
            this.open=v
        },
        getchange(v){//获取数据
            if(v.rushId){
                this.f.rushTitle=v.rushTitle
                this.f.rushSubTitle=v.rushSubTitle
                this.goodsId=v.goodsId
                this.f.limitNum=v.limitNum
                this.f.totalNum=v.totalNum
                this.f.remainNum=v.remainNum
                this.f.oldPrice=v.oldPrice
                this.f.rushPrice=v.rushPrice
                this.rushId=v.rushId
                this.useTimeValue=[new Date(v.beginTime),new Date(v.endTime)]
                this.fileDetailUploadList=[]
                this.fileDetailUploadList.push({
                    name: '',
                    url: v.rushImage
                })
                this.rushId=v.rushId
            }
        }
    },
    methods:{
        qiniuyunup(_vm, file, rule) {//图片上传
            const isJPG = file.type === 'image/jpeg'
            const isPNG = file.type === 'image/png'
            const isFitSize = rule.maxSize ? file.size / 1024 / 1024 < rule.maxSize : 'undefined';
            if (rule.isJPG || rule.isPNG) {
                if (!isJPG && !isPNG) {
                    _vm.$message.error('图片只能是 JPG/PNG 格式!');
                    return false
                }
            }
            if (isFitSize != 'undefined' && !isFitSize) {
                _vm.$message.error('大小不能超过 ' + rule.maxSize + 'MB!');
                return false
            }
        },
        handleDetailUploadSuccess(response, file, fileList) {//图片上传成功
            var newFile = {
                name: file.name,
                url: window.qiniuHost + response.key
            }
            this.fileDetailUploadList = []
            this.fileDetailUploadList.push(newFile)
        },
        handleDetailRemove(){//图片清空
            this.fileDetailUploadList = []
        },
        handleUploadError(error, file, fileList) {//图片上传失败
            const _this = this
            _this.$message.error('上传失败')
        },
        handleBeforUpload(file) {//图片上传前验证
            // console.log("file",file)
            const _this = this
            let rule = {
                isJPG: true,
                isPNG: true,
                maxSize: 2
            }
            var suffix = file.name.split('.')
            this.uploadData.key = new Date().getTime() + '.' + suffix[1]
            this.uploadData.token = this.$store.state.qiniuToken
            return this.qiniuyunup(_this, file, rule)
        },
        getgood(){
            this.$store.commit('ChangeWxGood')
        },
        getgooditem(m){
            this.goodsId=null
            this.goodsId=m
        },
        close(){//关闭清空
            this.f={}
            this.uploadData={
                key: '',
                token: ''
            }
            this.goodsId=''
            this.useTimeValue=[]
            this.fileDetailUploadList=[]
            this.$store.state.coutimeclass=false
            this.$store.state.coutime={}
        },
        save(){//保存
            var _this=this
            var pp=new URLSearchParams()
            if(!this.f.rushTitle){
                this.$message.error("标题不能为空")
                return
            }
            pp.append('rushTitle',this.f.rushTitle)
            pp.append('rushSubTitle',this.f.rushSubTitle)

            if(!this.goodsId){
                this.$message.error("关联商品不能为空")
                return
            }
            pp.append('goodsId',this.goodsId)
            if(!this.f.limitNum){
                this.$message.error("限购数量不能为空")
                return
            }
            pp.append('limitNum',this.f.limitNum)
            if(!this.f.totalNum){
                this.$message.error("商品总数不能为空")
                return
            }
            pp.append('totalNum',this.f.totalNum)
            if(!this.f.remainNum){
                this.$message.error("剩余数量不能为空")
                return
            }
            pp.append('remainNum',this.f.remainNum)
            pp.append('oldPrice',this.f.oldPrice)
            if(!this.f.rushPrice){
                this.$message.error("抢购价不能为空")
                return
            }
            pp.append('rushPrice',this.f.rushPrice)
            if(this.useTimeValue.length==0){
                this.$message.error("活动时间不能为空")
                return
            }
            pp.append('beginTime',moment(this.useTimeValue[0]).format("YYYY-MM-DD HH:mm:ss"))
            pp.append('endTime',moment(this.useTimeValue[1]).format("YYYY-MM-DD HH:mm:ss"))
            pp.append('rushImage',this.fileDetailUploadList[0].url)
            if(this.rushId==-1){//新增
                axios.get('/saveGoodsRush.do',{params:pp}).then(r=>{
                    if(r.data.code==200){
                        _this.$message.success('新增成功')
                        _this.$store.state.coutimeclass=false
                        _this.$store.state.coutime={}
                        _this.$store.state.coutimedialog=false
                        _this.close()
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            }else{
                pp.append('rushId',this.rushId)
                axios.get('/updateGoodsRush.do?',{params:pp}).then(r=>{
                    if(r.data.code==200){
                        _this.$message.success('修改成功')
                        _this.$store.state.coutimeclass=false
                        _this.$store.state.coutime={}
                        _this.$store.state.coutimedialog=false
                        _this.close()
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
.inputw{
    width: 100px; 
    margin-right: 10px;
}
.dialogh{
    height: 600px;
    overflow: scroll;
}
.el-dialog__header {
    padding: 10px;
    background-color: #20a0ff!important;
}
</style>
